<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>麦粒熊绘本</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_hsage5e3gw.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <p class="search w100p rel ml-20 mt-10">
            <i class="iconfont icon-sousuo abs f14"></i>
            <input type="text" class="search-box" placeholder="了不起的面包怪">
        </p>
        <nav class="navigation mt-10 mb-20 flex jc-sa">
            <a onclick="changeNav(1);" class="link active f18 f666 fw-b" href="#">推荐</a>
            <a onclick="changeNav(2);" class="link f18 f666 fw-b" href="#">书单</a>
            <a onclick="changeNav(3);" class="link f18 f666 fw-b" href="#">全部</a>
        </nav>
    </header>
    <div style="height: 130px;"></div>

    <!-- 轮播图 -->
    <div class="carousel">
        <div class="swiper">
            <img src="./img/ban2.png" alt="" class="swiper-image">
            <img src="./img/ban3.png" alt="" class="swiper-image">
            <img src="./img/ban1.png" alt="" class="swiper-image">
        </div>
        <!-- 圆点 -->
        <div class="swiper-dots"></div>
    </div>

    <main>
        <div class="new-book">
            <p>新书驾到</p>
            <ul class="link flex aic jc-sa" id="new-book">

            </ul>
        </div>
        <div class="best">
            <p>近期畅销</p>
            <ul class="link flex aic jc-sa" id="best">
            
            </ul>
        </div>
        <div class="author">
            <a class="more w100p flex aic jc-sb" href="./nice-author.html">
                <p>优秀作者代表</p>
                <span class="f666 f14">查看更多<i class="iconfont icon-xiangyoujiantou f14"></i></span>
            </a>
            <ul class="link flex aic jc-sa" id="author">
                <!-- <li class="item flex fdc aic pr-10">
                    <img src="./img/author1.png" alt="">
                    <span>赖马</span>
                </li>
                <li class="item flex fdc aic pr-10">
                    <img src="./img/author2.png" alt="">
                    <span>埃尔维·杜莱</span>
                </li>
                <li class="item flex fdc aic">
                    <img src="./img/author3.png" alt="">
                    <span>铃木典丈</span>
                </li> -->
            </ul>
        </div>
        <div class="award">
            <a class="more w100p flex aic jc-sb"  href="./award.html">
                <p>国际大奖绘本界“奥斯卡”</p>
                <span class="f666 f14">查看更多<i class="iconfont icon-xiangyoujiantou f14"></i></span>
            </a>
            <ul class="link flex aic jc-sa" id="award">
                <li class="flex fdc aic pr-10"  href="">
                    <img src="./img/nbe1.png" alt="">
                    <span>信谊图画书奖</span>
                </li>
                <li class="flex fdc aic pr-10"  href="">
                    <img src="./img/nbe2.png" alt="">
                    <span>凯迪克大奖</span>
                </li>
                <li class="flex fdc aic"  href="">
                    <img src="./img/nbe3.png" alt="">
                    <span>国际安徒生奖</span>
                </li>
            </ul>
        </div>
        <div class="like w100p mt-5">
            <p>猜你喜欢</p>
            <ul class="link flex aic jc-sa fww" id="link">
                <!-- <li class="item flex fdc aic mt-5">
                    <img src="./img/like1.png" alt="">
                    <span>大卫上学去</span>
                </li>-->
            </ul>
        </div>
    </main>

    <div class="blank"></div>
    <footer>
        <div class="bg-fff flex jc-sa fixed w100p">
            <a class="link active flex fdc aic jc-c f888" href="./index.html">
                <i class="iconfont icon-huibenyuedu f22"></i>
                <span class="pt-5 f12">绘本</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./bookshelf.html">
                <i class="iconfont icon-wodeshujia f22"></i>
                <span class="pt-5 f12">书架</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./discover.html">
                <i class="iconfont icon-faxian f22"></i>
                <span class="pt-5 f12">发现</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./my.html">
                <i class="iconfont icon-gerenzhongxin f22"></i>
                <span class="pt-5 f12">我的</span>
            </a>
        </div>
    </footer>

    <script src="./js/axios.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/qiehuan.js"></script>
    <script src="./js/index.js"></script>
    <script>
        // 搜索功能
        $('.search-box').on('keypress', function(e) {
            if (e.which == 13) { // 按下回车键
                var query = $(this).val();
                if (query) {
                    window.location.href = `./ss.html?q=${encodeURIComponent(query)}`;
                }
            }
        });
    </script>
    
</body>
</html>